<!doctype html>
<html lang="en" ng-app="addressBook">
<head>
  <meta charset="utf-8">
  <title>Addressbook in Angular.js</title>
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .sidebar-nav {
      padding: 9px 0;
    }
  </style>
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="brand" href="#">Addressbook in Angular.js</a>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span3">
        <div class="well sidebar-nav">
          <!-- Nav Controller -->
          <ul class="nav nav-list" ng-controller="navCtrl">
            <li ng-class="navClass('add')"><a href='#/add'>Add New Contact</a></li>
            <li ng-class="navClass('list')"><a href='#/list'>List all Contacts</a></li>
            <li ng-class="navClass('search')"><a href='#/search'>Search any Contact</a></li>
          </ul>
        </div>
      </div>
      <div class="span9">
        <!-- Views load here after clicking the nav links above -->
        <div ng-view></div>
      </div>
    </div>
  </div>

  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>  
</body>
</html>
